<template>
  <el-container>
    <div
      style="
        width: 80%;
        margin: auto;
        background-color: white;
        padding: 1rem;
        margin-top: 1rem;
        border-radius: 4px;
      "
    >
      <div>
        <p style="font-size: 28px; text-align: center">用户信息</p>
      </div>
      <div :v-model="userInfo" :key="userInfo.id">
        <el-descriptions labelstyle="padding-top: 1rem">
          <el-descriptions-item label="头像">
            <el-avatar :size="50" :src="this.userHead"></el-avatar>
          </el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="昵称">{{
            this.userInfo.nickName
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="用户名">{{
            userInfo.username
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="密码">{{
            userInfo.password
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="年龄">{{
            userInfo.age
          }}</el-descriptions-item>
        </el-descriptions>

        <el-descriptions v-if="userInfo.sex == 1">
          <el-descriptions-item label="性别">男</el-descriptions-item>
        </el-descriptions>
        <el-descriptions v-else>
          <el-descriptions-item label="性别">女</el-descriptions-item>
        </el-descriptions>

        <el-descriptions>
          <el-descriptions-item label="手机号">{{
            userInfo.phone
          }}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions>
          <el-descriptions-item label="邮箱">{{
            userInfo.mailbox
          }}</el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
  </el-container>
</template>

<script>
import axios from 'axios'
import { GetUserOne } from "../api/home"
import { GetUserHeadPicture } from "../api/home"
// const server = axios.create({
//   timeout: 5000
// });
// server.interceptors.request.use(
//   config => {
//     return config
//   },
//   error => {
//     return error
//   }
// )

export default {
  data () {
    return {
      userInfo: {

      },
      userHead: ''
    }
  },
  mounted () {
    this.getUser();
    this.GetUserHead();
  },
  methods: {
    GetUserHead () {
      GetUserHeadPicture(localStorage.getItem("Id")).then(res => {
        const src = window.URL.createObjectURL(res.data);
        this.userHead = src;
      })
    },
    // GetUserHead () {
    //   server({
    //     url: `http://localhost:5000/HeadPortrait/${localStorage.getItem("Id")}`,
    //     method: 'get',
    //     userHead: '',
    //     responseType: 'blob'
    //   }).then(res => {
    //     const href = window.URL.createObjectURL(res.data);
    //     this.userHead = href;
    //     console.log(this.userHead);
    //   })
    // },
    getUser () {
      GetUserOne(localStorage.getItem("Id")).then((res) => {
        this.userInfo = res.data.data;
        console.log(this.userInfo);
      })
    }
  }
}
</script scoped>
<style>
.el-descriptions {
  margin-top: 1rem;
  text-align: center;
  margin-left: 40%;
}
</style>